<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="0" id="selextTitle">湖南卓景京信息技术有限公司官网</title>
<meta name="keywords" content="${keyword}">
<meta name="description" content="${description }" />

<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link href="${path }/resource/css/visitor/index.css" rel="stylesheet"
	type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link rel="shortcut icon"
	href="${path }/resource/${path }/resource/images/favicon.ico">
</head>
<body class="">

	<jsp:include page="_top.jsp"></jsp:include>
	<div class="warp-box">
		<div id="myCarousel" class="carousel slide" data-ride="carousel">

			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<c:forEach items="${lbt }" var="item" varStatus="count">
					<c:if test="${count.index eq 1 }">
						<li data-target="#myCarousel" data-slide-to="${count.index }"
							class="active"></li>
					</c:if>
					<c:if test="${count.index ne 1 }">
						<li data-target="#myCarousel" data-slide-to="${count.index }"
							class=""></li>
					</c:if>
				</c:forEach>
			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<c:forEach items="${lbt }" var="item" varStatus="count">
					<c:if test="${count.index eq 1 }">
						<div class="item active">
							<img src="${item.adImg }">
						</div>
					</c:if>
					<c:if test="${count.index ne 1 }">
						<div class="item">
							<img src="${item.adImg }">
						</div>
					</c:if>
				</c:forEach>
			</div>
			<!-- 轮播（Carousel）指标
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class=""></li>
            <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
        </ol> -->
			<!-- 轮播（Carousel）项目 
        <div class="carousel-inner">
            <div class="item">
                <img src="${path}/resource/${path }/resource/images/banner01.jpg" alt="First slide">
            </div>
            <div class="item active">
                <img src="${path}/resource/${path }/resource/images/banner02.jpg" alt="Second slide">
            </div>
        </div>-->
			<!-- 轮播（Carousel）导航 -->
			<a class="carousel-control left" href="#myCarousel" data-slide="prev">
			</a> <a class="carousel-control right" href="#myCarousel"
				data-slide="next"> </a>
		</div>
		<div class="content">
			<div class="container main">
				<!--优质课程-->
				<div class="list course">
					<h3>优质课程</h3>
					<ul>
						<c:forEach items="${yzkc }" var="item" varStatus="count">
							<li><a href="${item.adUrl }"><img src="${item.adImg }"
									alt=""> <span>${item.adTitle }</span></a>
							</li>
						</c:forEach>
					</ul>
				</div>
				<!--免费课程-->
				<div class="list free-class">
					<h3><a href="${path }/visitor/freeclass" >免费课程</a></h3>
					<a href="${path }/visitor/freeclass" class="pull-right view-more">more</a>
					<ul>

						<c:forEach items="${mfkc }" var="item" varStatus="count">
							<li><a href="${item.adUrl }"> <img src="${item.adImg }" alt=""
									class="pic"> <img
									src="${path }/resource/images/playBtn.png" alt=""
									class="play-btn">
									<div class="info">
										<p>${item.adTitle }</p>
										<span>${item.adInfo1 }</span>
									</div>
							</a></li>
						</c:forEach>
					</ul>
				</div>
				<!--就业资讯-->
				<div class="list job">
					<h3><a href="${path }/visitor/job">就业资讯</a></h3>
					<a href="${path }/visitor/job" class="pull-right view-more">more</a>
					<div id="job-wrap">
						<ul id="job">
						<c:forEach items="${jyzx }" var="item" varStatus="count">
							<li><img src="${item.adImg}" alt="">
									<div class="info">
										<p class="name">${item.adTitle}</p>
										<p>
											<span>${item.adUrl}</span><span class="money">${item.adInfo1}</span>
										</p>
									</div> </li>
						</c:forEach>
						</ul>
						<span class="prev"><span class="glyphicon glyphicon-chevron-left"></span></span>
						<span class="next"><span class="glyphicon glyphicon-chevron-right"></span></span>
						
					</div>
				</div>
				<div class="co-operatives">
					<div class="co-operatives-pic">
						<h2>合作企业</h2>
						<img src="${path }/resource/images/co.gif" alt="">
					</div>
					<div id="co-operatives-wrap">
						<ul class="co-operatives-list" id="co_operatives">
						<c:forEach items="${hzqy }" var="item" varStatus="count">
							<li><img src="${item.adImg}" alt=""></li>
						</c:forEach>
						</ul>
						<span class="prev"><span class="glyphicon glyphicon-chevron-left"></span></span>
						<span class="next"><span class="glyphicon glyphicon-chevron-right"></span></span>
					</div>
				</div>
				<div class="list news">
					<h3>新闻资讯</h3>
					<a href="${path }/visitor/news" class="pull-right view-more" style="margin-right:0;">more</a>
					<div class="row">

						<c:forEach items="${news }" var="item">
							<div class="col-md-6">
								<div class="news-list">
									<img src="${item.artImage }" alt="">
									<div class="info">
										<p><a href="${path }/visitor/article?id=${item.artId}">${item.artTitle }</a></p>
										<span class="boder-box">${item.artTypeName }<span
											class="square"></span><span class="square2"></span></span> <span
											class="time"><fmt:formatDate
												value="${art.artCreatetiem }" pattern="yyyy-MM-dd" /> </span>
									</div>
								</div>
							</div>
						</c:forEach>


					</div>
				</div>
				<div class="list tutor">
					<h3>大咖导师</h3>
					<ul>
						<c:forEach items="${dkds }" var="item">
							<li><img src="${item.adImg}"
									alt="" class="pic">
									<div class="info">
										<p>${item.adTitle}</p>
										<span>${item.adInfo1}</span>
									</div>
									<div class="text-none">
                            			<h4>${item.adTitle } </h4>
                            			<h4>${item.adInfo1 }</h4>
                            			<p>${item.adUrl }</p>
                        			</div>
							</li>
						</c:forEach>
					</ul>
				</div>
				<div class="teacher">
					<div class="teacher-pic">
						<h2>精英导师</h2>
						<img src="${path }/resource/images/tea.gif" alt="">
					</div>
					<ul class="teacher-list">
						<c:forEach items="${jyds }" var="item">
							<li><img src="${item.adImg}" />
									<div class="text-none2">
                            			<h4 class="text-center">${item.adTitle }  </h4>
                            			<h4 class="text-center">${item.adInfo1 } </h4>                   
                        			</div></li>
						</c:forEach>
					</ul>
				</div>
				<div class="list university">
					<h3>合作院校</h3>
					<div id="university-wrap">
						<ul id="university">
						<c:forEach items="${hzyx }" var="item">
							<li><img src="${item.adImg}" /><span>${item.adTitle }</span></li>
						</c:forEach>
						</ul>
						<span class="prev"><span class="glyphicon glyphicon-chevron-left"></span></span>
						<span class="next"><span class="glyphicon glyphicon-chevron-right"></span></span>
					</div>
				</div>
			</div>
		</div>
	</div>

	<jsp:include page="_foot.jsp"></jsp:include>
	<script type="text/javascript"
		src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
	<script type="text/javascript"
		src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/systools/AjaxProxy.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/systools/MTools.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/plugin/carousel.js"></script>
	<script src="${path }/resource/js/plugin/tween.js"></script>
	<script src="${path }/resource/js/plugin/utils.js"></script>

	<script>
	~(function () {
        var step = 0;
        function changeImg(obj, len, width) {
            if (step === 0) {
                obj.style.left = 0;
            }
            step++;
            window.tween(obj, {left: -step * width}, 1500);
            if (step >= (len / 4)-1) {
                step = 0;
            }
        }
        function changeImg2(obj, len, width) {
            step--;
            if(step<0)
            {
                step=(len / 4)-2;
                css(obj,"left",-(step+1)*width)
            }
            window.tween(obj,{left:-step*width},1500);
        }
        function show(i) {
            next[i].style.display="block";
            prev[i].style.display="block"
        }
        function hide(i) {
            next[i].style.display="none";
            prev[i].style.display="none";
        }

        var job_wrap = document.getElementById("job-wrap");
        var co_operatives_wrap=document.getElementById("co-operatives-wrap");
        var university_wrap=document.getElementById("university-wrap");
        var next=document.getElementsByClassName("next");
        var prev=document.getElementsByClassName("prev");
        job_wrap.onmouseover=function () {
            show(0)
        };
        job_wrap.onmouseout=function () {
            hide(0)
        };
        co_operatives_wrap.onmouseover=function () {
            show(1)
        };
        co_operatives_wrap.onmouseout=function () {
            hide(1)
        };
        university_wrap.onmouseover=function () {
            show(2)
        };
        university_wrap.onmouseout=function () {
            hide(2)
        };


        var job=document.getElementById("job")
        var len1=job.getElementsByTagName("li").length;
        console.log(len1)
        next[0].onclick=function () {
            changeImg(job, len1, 1152)
        }
        prev[0].onclick=function () {
            changeImg2(job, len1, 1152)
        }
        
        var co_operatives=document.getElementById("co_operatives")
        var len2=co_operatives.getElementsByTagName("li").length;
        next[1].onclick=function () {
            changeImg(co_operatives, len2, 880)
        }
        prev[1].onclick=function () {
            changeImg2(co_operatives, len2, 880)
        }
        
        var university = document.getElementById("university");
        var len3=university.getElementsByTagName("li").length;
        next[2].onclick=function () {
            changeImg(university, len3,1160)
        }
        prev[2].onclick=function () {
            changeImg2(university, len3, 1160)
        }
	})()
	</script>
</body>
</html>
